<!-- eslint-disable vue/multi-word-component-names -->
<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <main>
    <div class="db">
<div @click="goBack">
  <span> <img class="fanhui" src="../../assets/icon/hdpi/fh.png" alt=""> </span><p class="xun">急寻: 面神经炎的治疗方法</p>
</div>
</div>
<div class="zhang">
    <h3 style="color: #70acf1">张三</h3>
    <p style="font-size: 13px; color: #70acf1; margin-top: 10px;">[病症]</p>
    <p style="font-size: 13px; margin-top: 5px;">面神经炎</p>
    <p style="font-size: 13px; color: #70acf1; margin-top: 10px;">[科室]</p>
    <p style="font-size: 13px;">内科</p>
    <p style="font-size: 14px; color: #70acf1; margin-top: 10px;">[病症详情]</p>
    <p  style="font-size: 13px; margin-top: 5px;">周围性神经炎,下巴斜的,口齿不清,眼睛也闭合不了,右边的脸明显也动不了</p>
    <p style="font-size: 14px; color: #70acf1; margin-top: 10px;">[治疗经历]</p>
    <span style="font-size: 13px; margin-top: 5px;">北京天坛医院</span>
    <span style="font-size: 13px; float: right; margin-top:4px;">2018.12.10-12.15</span>
    <p style="font-size: 13px; margin-top: 5px;">每天进行扎针和按摩,现在的情况已经好转了,眼睛基本可以闭合了,说话也没那么费劲了</p>
   <p style="font-size: 14px; margin-top: 5px; color: #70acf1;">[相关图片]</p>
   <p><img src="../../assets/icon/hdpi/b1.png" alt=""></p>
   <div class="san1">
    <p class="san">30H币</p>
   </div>
   <div id="app">  
    <button class="jie" @click="showKeyboard = true">我来解答</button>  
    <div v-if="showKeyboard" class="keyboard-popup">  
      <div class="keyboard">  
        <!-- 模拟键盘按键 -->  
        <button v-for="key in keys" :key="key" @click="inputKey(key)">{{ key }}</button>  
      </div>  
      <div class="input-container">  
        <input type="text" v-model="inputText" placeholder="在这里输入" />  
      </div>  
      <button class="fa" @click="showKeyboard = false">发送</button>  
    </div>  
  </div> 
</div>
  </main>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router'; 
    const router = useRouter();  
function goBack() {  
      // 使用router.go(-1)模拟浏览器的后退操作  
      router.go(-1);  
    }  
 
  
const showKeyboard = ref(false);  
const inputText = ref('');  
const keys = 'abcdefghijklmnopqrstuvwxyz'.split(''); // 26个字母  
  
function inputKey(key: string) {  
  inputText.value += key; // 将点击的键添加到输入框中  
} 
</script>
<style>
.xun{
    margin-left: 70px;
}
.zhang{
    position: absolute;
    left: 23px;
}
.san{
  
  color: #db2c15;
  position: absolute;
  top: 550px;
  background: #fff;
  font-size: 18px;
  margin-left: 80px;

}
.san1{
  width: 230px;
  height: 50px;
  border: 1px solid #ccc;
  margin-top: 50px;
}
.jie{
  width: 120px;
  height: 50px;
  background: #3087ea;
  position: absolute;
  top: 534px;
  left: 230px;
  border: none;
  color: #ffff;
}
.keyboard-popup {  
  width:100%; 
  height: 100%;  
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */  
  position: absolute;
  top: 460px;
  left: 0px;
}  
  
.keyboard {  
 
  grid-template-columns: repeat(3, 1fr);  
  background-color: white;  
  border-radius: 8px;  
}  
  
.keyboard button {  
  padding: 5px 8px;  
  font-size: 15px;  
  cursor: pointer;  
}  
  
.input-container {  
  margin-top: 20px;  
}  
  
.input-container input {  
  padding: 10px;  
  font-size: 16px;  
  width: 300px;  
  position: absolute;
  top: -50px;
  width: 98%;
}
.fa{
  width: 125px;
  height: 50px;
  background: #3087ea;
  position: absolute;
  top: 75px;
  left: 230px;
border: none;
color: #fff;
}
</style>